<template>
  <Teleport to="body">
    <Transition>
      <div class="toast" v-show="innerOpen">{{ content }}</div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
// import {
//   ToastAction,
//   ToastClose,
//   ToastProvider,
//   ToastDescription,
//   ToastRoot,
//   ToastTitle,
// } from 'reka-ui'

import { ref, Teleport, toRef, watch, Transition } from 'vue'

const props = defineProps<{
  content?: string
}>()

const open = defineModel()

const innerOpen = ref(false)

watch(open, (newVal) => {
  let timer
  if (!!newVal) {
    innerOpen.value = true
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      innerOpen.value = false
      open.value = false
    }, 1000)
  } else {
    if (timer) {
      clearTimeout(timer)
    }
    innerOpen.value = false
  }
})
</script>

<style scoped lang="scss">
.toast-provider {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.toast {
  top: 13px;
  position: fixed;
  display: flex;
  margin: auto 0;
  padding: 10px;
  background: #fff;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px 0px;
  border: 1px solid rgba(0, 0, 0, 0.175);
  border-radius: 5px;
  font-size: 12px;
  color: #666;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 0.1s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
